<template>
    <div class="relative mx-[20rpx] mt-[20rpx]">
        <view class="text-center">
            <view class='tooltips'>
                <image src="@/static/images/icon/notice.png" mode="" class="img"></image>
                点击右上角•••添加到我的小程序，方便下次找回
            </view>
        </view>
        <view class="nav-title">精品功能区</view>
        <view v-for="(sItem, sIndex) in navList" :key="sIndex">
            <view class="nav" v-if="navList.length && content.enabled">
                <view
                    class="grid grid-rows-auto gap-y-3 w-full nav-list"
                >
                    <view
                        v-for="(item, index) in sItem"
                        :key="index"
                        class="nav-item"
                        :class="'nav-item-' + (index+1)"
                        @click="handleClick(item.link)"
                    >
<!--                        <u-image width="82" height="82" :src="getImageUrl(item.image)" alt=""/>-->
                        <view class="mt-[14rpx] nav-item__title">{{ item.name }}</view>
                    </view>
                </view>
            </view>
        </view>
    </div>
</template>

<script setup lang="ts">
import {ref, watch, computed} from 'vue'
import {useAppStore} from '@/stores/app'
import {navigateTo, sliceArray} from '@/utils/util'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})

const {getImageUrl} = useAppStore()
const swiperCurrent = ref<number>(0)
const navList = ref<Record<string, any>>([])

const pagesNum = computed<number>(() => {
    return props.content.per_line * props.content.show_line
})

watch(
    () => props.content.data,
    (val) => {
        const num = props.content.style === 1 ? val.length : pagesNum.value
        navList.value = sliceArray(val, num)
        console.log(navList.value)
    },
    {deep: true, immediate: true}
)

const handleClick = (link: any) => {
    navigateTo(link)
}

const swiperChange = (e: any) => {
    swiperCurrent.value = e.detail.current
}
</script>
<style lang="scss" scoped>
.tooltips{
    text-align: center;
    display: inline-block;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background-color: #3b1e7c;
    color:#fff;
    margin: 0 auto;

    image{
        float:left;
        height: 30rpx;
        width: 30rpx;
        position: relative;
        top: 4rpx;
    }
}
.nav-title{
    font-weight: bold;
    font-size: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    background-image: url('@/static/images/icon/title_bg.png');
    background-repeat: no-repeat;
    background-size: 285rpx auto;
    background-position: center center;
}
.nav-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20rpx;
    grid-row-gap: 20rpx;
    height: 300rpx;

    .nav-item {
        width: 100%;
        border-radius: 20rpx;
        background-color: #fff;

        .nav-item__title {
            font-weight: bold;
            font-size: 40rpx;
            color:#333;
            text-indent: 20rpx;
        }
    }
    .nav-item-1 {
        grid-area: 1 / 1 / 5 / 3;
        background-image: url('@/static/images/icon/read_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .nav-item-2 {
        grid-area: 1 / 3 / 3 / 5;
        background-image: url('@/static/images/icon/listen_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .nav-item-3 {
        grid-area: 3 / 3 / 5 / 5;
        background-image: url('@/static/images/icon/write_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}



</style>